﻿@model ApplicationEditViewModel
@using ConsentTypes = OpenIddict.Abstractions.OpenIddictConstants.ConsentTypes
@using ClientTypes = OpenIddict.Abstractions.OpenIddictConstants.ClientTypes
@{
	List<SelectListItem> consentTypes =
	[
		new SelectListItem(ConsentTypes.Explicit, ConsentTypes.Explicit),
		new SelectListItem(ConsentTypes.Implicit, ConsentTypes.Implicit),
		new SelectListItem(ConsentTypes.External, ConsentTypes.External),
		new SelectListItem(ConsentTypes.Systematic, ConsentTypes.Systematic)
	];
	List<SelectListItem> clientTypes =
	[
		new SelectListItem(ClientTypes.Confidential, ClientTypes.Confidential),
		new SelectListItem(ClientTypes.Public, ClientTypes.Public),
	];
}
<div class="p-4">
	<h3>应用详情（@Model.DisplayName）</h3>
	<hr>
	<form method="post"
	      asp-controller="Manage"
	      asp-action="ApplicationEdit" class="layui-form">
		<div asp-validation-summary="All" class="text-danger"></div>
		<div class="mt-2">
			<label>ClientId</label>
			<input asp-for="ClientId" hidden readonly>
			<input asp-for="ClientId" class="form-control" disabled readonly>
		</div>
		<div class="mt-2">
			<label>ClientSecret</label>
			<input asp-for="ClientSecret" hidden readonly>
			<input asp-for="ClientSecret" class="form-control" disabled readonly>
		</div>
		<div class="mt-2">
			<a asp-controller="Manage" asp-action="ApplicationUpdateClientSecret" asp-route-clientId="@Model.ClientId" class="btn btn-outline-danger">重置Client Secret</a>
		</div>
		<div class="mt-2">
			<label>ConsentType</label>
			<select asp-for="ConsentType" asp-items="consentTypes" class="form-control"></select>
		</div>
		<div class="mt-2">
			<label>DisplayName</label>
			<input asp-for="DisplayName" class="form-control">
		</div>
		<div class="mt-2">
			<label>ClientType</label>
			<select asp-for="ClientType" asp-items="clientTypes" class="form-control"></select>
		</div>
		<div id="redirectUris" class="mt-2">
			<label>
				RedirectUris
				<img src="~/images/icon_添加.svg" id="addRedirectUri" style="color: blue;cursor: pointer" alt=""/>
			</label>
			@for (var i = 0; i < Model.RedirectUris.Length; i++)
			{
				<div class="redirect-uri-input d-flex mt-2">
					<input type="text" name="RedirectUris[@i]" value="@Model.RedirectUris[i]" class="form-control" placeholder="用户授权后，重定向的地址，例如: https://xxx.com/login/callback_xx" required/>
					<img src="~/images/icon_删除.svg" class="remove-redirect-uri px-3" style="cursor: pointer;" alt="" disabled="@(Model.RedirectUris.Length == 1)"/>
				</div>
			}
		</div>
		<div id="postLogoutRedirectUris" class="mt-2">
			<label>
				PostLogoutRedirectUris
				<img src="~/images/icon_添加.svg" id="addPostLogoutRedirectUris" style="color: blue;cursor: pointer" alt=""/>
			</label>
			@for (var i = 0; i < Model.PostLogoutRedirectUris.Length; i++)
			{
				<div class="postLogout-redirect-uri-input d-flex mt-2">
					<input type="text" name="PostLogoutRedirectUris[@i]" value="@Model.PostLogoutRedirectUris[i]" class="form-control" placeholder="用户登出后，重定向的地址，例如: https://xxx.com/logout/callback_xx" required/>
					<img src="~/images/icon_删除.svg" class="remove-postLogout-redirect-uri px-3" style="cursor: pointer;" alt="" disabled="@(Model.PostLogoutRedirectUris.Length == 1)"/>
				</div>
			}
		</div>
		<div class="mt-2">
			<label>AllowScopes</label>
			<input type="text" asp-for="AllowScopes" placeholder="逗号分隔的权限，例如: profile,email" class="form-control">
		</div>
		<div class="mt-2">
			<label>RequirePkce</label>
			<input asp-for="RequirePkce" type="checkbox" lay-skin="switch">
		</div>
		<div class="mt-2">
			<button type="submit" name="submit" class="btn btn-primary">提交修改</button>
			<a asp-controller="Manage" asp-action="ApplicationDelete" asp-route-clientId="@Model.ClientId" class="btn btn-danger">删除应用</a>
		</div>
	</form>
</div>

@section Scripts {
	<script>
	"use strict";
	function addInputField(containerId, inputClass, addButtonId, inputNamePrefix,placeholder) {
		const container = $(`#${containerId}`);
		const index = container.find(`.${inputClass}`).length;
		const inputHtml = `
	        <div class="${inputClass} d-flex mt-2">
	            <input type="text" name="${inputNamePrefix}[${index}]" class="form-control" placeholder="${placeholder}" required/>
	            <img src="/images/icon_删除.svg" class="remove-${inputClass} px-3" style="cursor: pointer;" alt="" />
	        </div>`;
		container.append(inputHtml);

		// 检查是否只有一个输入框，如果是，则禁用删除按钮
		updateRemoveButtonState(container, inputClass);
	}

	function removeInputField(containerId, inputClass) {
		$(document).on('click', `.remove-${inputClass}`, function () {
			const $inputContainer = $(this).closest(`.${inputClass}`);
			$inputContainer.remove();

			// 重新排序输入框的索引
			const container = $(`#${containerId}`);
			container.find(`.${inputClass}`).each(function (index) {
				const $input = $(this).find(`input[name^="${inputNamePrefix}"]`);
				$input.attr('name', `${inputNamePrefix}[${index}]`);
			});

			// 检查是否只有一个输入框，如果是，则禁用删除按钮
			updateRemoveButtonState(container, inputClass);
		});
	}

	function updateRemoveButtonState(container, inputClass) {
		if (container.find(`.${inputClass}`).length <= 1) {
			container.find(`.remove-${inputClass}`).prop('disabled', true);
		} else {
			container.find(`.remove-${inputClass}`).prop('disabled', false);
		}
	}

	$(document).ready(function () {
		// 添加 Redirect URI 输入框
		$('#addRedirectUri').click(function () {
			addInputField('redirectUris', 'redirect-uri-input', 'addRedirectUri', 'RedirectUris','用户授权后，重定向的地址，例如: https://xxx.com/login/callback_xx');
		});

		// 删除 Redirect URI 输入框
		removeInputField('redirectUris', 'redirect-uri-input');

		// 添加 Post Logout Redirect URI 输入框
		$('#addPostLogoutRedirectUris').click(function () {
			addInputField('postLogoutRedirectUris', 'postLogout-redirect-uri-input', 'addPostLogoutRedirectUris', 'PostLogoutRedirectUris','用户登出后，重定向的地址，例如: https://xxx.com/logout/callback_xx');
		});

		// 删除 Post Logout Redirect URI 输入框
		removeInputField('postLogoutRedirectUris', 'postLogout-redirect-uri-input');

		// 初始状态
		updateRemoveButtonState($('#redirectUris'), 'redirect-uri-input');
		updateRemoveButtonState($('#postLogoutRedirectUris'), 'postLogout-redirect-uri-input');
	});
</script>
}
